<template>
	<view class="nav-bar">
		<view class="nav-container" :style="{background:bgcolor+';'}">
			<!-- <view class="status-bar" :style="{height:menuInfo.top+'px'}"></view> -->
			<view class="nav-content" :style="{height:menuInfo.height+'px'}">
				<view class="search-box">
					<image class="search-image" mode="aspectFit" src="@/static/icons/search.png"></image>
					<input @confirm="search" v-model="inputValue"
						placeholder="输入关键词搜索" type="text" ></input>
				</view>
			</view>
		</view>
		<view class="nav-empty" :style="{height:menuInfo.bottom+'px'}" v-if="!empty"></view>
	</view>
</template>

<script>
	export default {
		props: {
			bgcolor: {
				type: String,
				default: "rgba(0,0,0,0)"
			},
			title: {
				type: String,
				default: ""
			},
			empty: {
				type: Boolean,
				default: !1
			}
		},
		data() {
			return {
				currentClassify: -1,
				classifyList: [],
				statusBarHeight: uni.getSystemInfo().statusBarHeight,
				menuInfo: uni.getMenuButtonBoundingClientRect(),
				inputValue: ''
			}
		},
		// computed: {
		//     bottomSafeHeight: function() {
		//         return e.getStorageSync("deviceInfo").bottomSafeAreaHeight;
		//     }
		// },
		onLoad() {
			console.log(uni.getMenuButtonBoundingClientRect(),'menuInfo')
		},
		methods: {
			search: function() {
				if (!this.inputValue) return uni.toast("请输入关键词");
				uni.navigateTo({
					url: "/pages/home/search/search?tag=" + this.inputValue
				});
			},
			goback: function() {
				uni.navigateBack();
			},
			gohome: function() {
				uni.reLaunch({
					url: "/pages/tabbar/home"
				});
			}
		}
	}
</script>

<style lang="scss">
	.nav-container {
		backdrop-filter: blur(13px);
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 999999;
	}

	.nav-content {
		width: 100vw;
	}

	.nav-left {
		border-radius: 10000rpx;
		justify-content: space-between;
		margin-left: 15rpx;
		padding: 20rpx;
	}

	.left-option,
	.nav-left {
		align-items: center;
		display: flex;
		z-index: 999;
	}

	.left-option {
		border-radius: 50%;
		height: 50rpx;
		justify-content: center;
		width: 50rpx;
	}

	.xiexian {
		color: hsla(0, 0%, 100%, .302);
		font-size: 18px;
		z-index: 999;
	}

	.left-option image {
		height: 90%;
		width: 90%;
		z-index: 999;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 700;
		position: absolute;
		text-align: center;
		top: 0;
		width: 100vw;
		z-index: 1;
	}

	.search-box {
		align-items: center;
		background-color: hsla(0, 0%, 100%, .1);
		border-radius: 40rpx;
		display: flex;
		height: 60rpx;
		margin-left: 30rpx;
		padding: 0 30rpx;
		width: 500rpx;
	}

	.search-box .search-image {
		height: 30rpx;
		width: 30rpx;
	}

	.search-box input {
		color: hsla(0, 0%, 100%, .7);
		flex: 1;
		font-size: 28rpx;
		height: 88rpx;
		margin-left: 30rpx;
	}

	.reason_txt {
		border-spacing: .5rem;
		color: #adadad;
		display: table;
		font-size: 24rpx;
		margin-left: 80rpx;
		margin-right: 80rpx;
		white-space: nowrap;
		width: auto;
	}

	.reason_txt::after,
	.reason_txt::before {
		background: linear-gradient(#d8d8d8, #d8d8d8) repeat-x 50%;
		background-size: .04rem .04rem;
		content: "";
		display: table-cell;
		width: 50%;
	}
</style>